<template>
	<view class="good-list">
		<u-cell-group>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
				<view slot="title">
					<text class="title">用章人：</text><text>{{item.userName}}</text>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
				<view slot="title">
					<text class="title">当前次数：</text><text>{{item.useCount}}</text>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
				<view slot="title">
					<text class="title">状态：</text><u-tag :text="computeError(item.error,'text')" :type="computeError(item.error,'type')" mode="light" size="mini"/>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item" v-if="item.errorMsg">
				<view slot="title">
					<view>异常信息：<u-tag :text="item.errorMsg" type="error" size="mini"/></view>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
				<view slot="title">
					<view v-if="item.modelName">
						<text class="title">使用模式：</text><u-tag :text="item.modelName" type="success" mode="light" size="mini"/>
					</view>
					<view v-else>
						<text class="title">使用模式：</text><u-tag :text="$lizhao.computeType.getTypeName(item.type)" type="success" mode="light" size="mini"/>
					</view>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
				<view slot="title">
					<text class="title">用章日期：</text><text>{{item.realTime}}</text>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
				<view slot="title">
					<text class="title">用章位置：</text><text>{{item.location}}</text>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item" v-if="item.useUrls&&item.useUrls.length>0">
				<view slot="title">
					<view>盖章图片：</view>
					<view class="image-inline">
						<view  v-for="(imag,imagIndex) in item.useUrls" :key="imagIndex">
							<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
							<u-image v-else class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="imag.QSS==false?imag.fileUrl:imag.fileUrl+'?Authorization='+userInfo.token+'&us=app&width=80'" @click="previewImage(item.useUrls,imag,imagIndex)"></u-image>
						</view>
					</view>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item"  v-if="item.temporaryUrls&&item.temporaryUrls.length>0" >
				<view slot="title">
					<view>临时图片：</view>
					<view class="image-inline error-item">
						<view  v-for="(imag,imagIndex) in item.temporaryUrls" :key="imagIndex">
							<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
							<u-image v-else class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="imag.QSS==false?imag.fileUrl:imag.fileUrl+'?Authorization='+userInfo.token+'&us=app&width=80'" @click="previewImage(item.temporaryUrls,imag,imagIndex)"></u-image>
						</view>
					</view>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item" v-if="item.passwordUrls&&item.passwordUrls.length>0">
				<view slot="title">
					<view>密码图片：</view>
					<view class="image-inline error-item">
						<view  v-for="(imag,imagIndex) in item.passwordUrls" :key="imagIndex">
							<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
							<u-image v-else class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="imag.QSS==false?imag.fileUrl:imag.fileUrl+'?Authorization='+userInfo.token+'&us=app&width=80'" @click="previewImage(item.passwordUrls,imag,imagIndex)"></u-image>
						</view>
					</view>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item" v-if="item.auditorUrls&&item.auditorUrls.length>0">
				<view slot="title">
					<view>审计图片：</view>
					<view class="image-inline">
						<view  v-for="(imag,imagIndex) in item.auditorUrls" :key="imagIndex">
							<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
							<u-image v-else class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="imag.QSS==false?imag.fileUrl:imag.fileUrl+'?Authorization='+userInfo.token+'&us=app&width=80'" @click="previewImage(item.auditorUrls,imag,imagIndex)"></u-image>
						</view>
					</view>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item" v-if="item.replenishList&&item.replenishList.length>0">
				<view slot="title">
					<view>追加图片：</view>
					<view class="image-inline">
						<view  v-for="(imag,imagIndex) in item.replenishList" :key="imagIndex">
							<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
							<u-image v-else class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="imag.QSS==false?imag.fileUrl:imag.fileUrl+'?Authorization='+userInfo.token+'&us=app&width=80'" @click="previewImage(item.replenishList,imag,imagIndex)"></u-image>
						</view>
					</view>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item" v-if="item.warnUrls&&item.warnUrls.length>0">
				<view slot="title" style="display: flex;flex-wrap: wrap;">
					<view>按压超时：</view>
					<view class="image-inline error-item">
						<view  v-for="(imag,imagIndex) in item.warnUrls" :key="imagIndex">
							<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
							<u-image v-else class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="imag.QSS==false?imag.fileUrl:imag.fileUrl+'?Authorization='+userInfo.token+'&us=app&width=80'" @click="previewImage(item.warnUrls,imag,imagIndex)"></u-image>
						</view>
					</view>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item" v-if="item.overTimesUrls&&item.overTimesUrls.length>0">
				<view slot="title" style="display: flex;flex-wrap: wrap;">
					<view>超次图片：</view>
					<view class="image-inline error-item">
						<view  v-for="(imag,imagIndex) in item.overTimesUrls" :key="imagIndex">
							<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
							<u-image v-else class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="imag.QSS==false?imag.fileUrl:imag.fileUrl+'?Authorization='+userInfo.token+'&us=app&width=80'" @click="previewImage(item.overTimesUrls,imag,imagIndex)"></u-image>
						</view>
					</view>
				</view>
			</u-cell-item>
		</u-cell-group>
		<qssAnimateGif ref="qssAnimateGif" style="z-index: 1000;"></qssAnimateGif>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	
	export default {
		computed: {
			...mapGetters(['userInfo', 'api']),
			computeError(){
				return (error,type)=>{
					if(error==-1){
						return type=='text'?'异常':'error'
					}else if(error==0){
						return type=='text'?'正常':'success'
					}else if(error==1){
						return type=='text'?'警告':'warning'
					}
				}
			},
			computeType(){
				return (type)=>{
					if(type==0){
						return '申请单模式'
					}else if(type==1){
						return '申请单模式(量子)'
					}else if(type==2){
						return '指纹模式'
					}else if(type==3){
						return '指纹模式(量子)'
					}else if(type==4){
						return '密码模式'
					}
				}
			}
		},
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {
			}
		},
		mounted() {
			that = this
		},
		methods: {
			//浏览图片
			async previewImage(list,row,index,title){
				//如果开启了只有点击才加载量子解密
				if(getApp().globalData.GK_QSS_ONOFF.clickDecrypt&&row.secretKey&&row.QSS!==false){
					const SystemInfo = uni.getSystemInfoSync();
					if(SystemInfo.platform!='ios'){
						that.$refs.qssAnimateGif.open()
						that.isgkQSS(row,index)
					}
				}else{
					if(row.QSS==false){//如果是量子加密的图片则只能一张一张看
						that.$lizhao.download.qssSave(row.fileUrl)
					}else if(row.fileId){
						let srcIndex=0
						list.forEach((item,i)=>{
							if(item.fileId==row.fileId){
								srcIndex=i
							}
						})
						//解决1.0查看原图兼容问题，2.0后此代码可以删除
						await that.$lizhao.seeBigImage.getOriginal(list);
						// 预览图片(长列表虚拟滚动只能一张一张看)，可以优化成当前三屏图片滑动后期在改
						uni.previewImage({
							urls: list.map(item=>item.fileUrl+`?Authorization=${that.userInfo.token}&us=app`),
							current:srcIndex,
							longPressActions: {
								itemList: ['保存图片'],
								success: function(data) {
									that.$lizhao.download.save(row,'fileUrl',that.userInfo.token)
								},
								fail: function(err) {
									//console.log(err.errMsg);
								}
							}
						});
					}
				}
			},
			//是否进行国科量子解密
			async isgkQSS(data,index){
				let base64=await that.$lizhao.QSS.SM4DecryptBigData(data.QssfileUrl,data.secretKey)
				if(base64=='data:image/jpg;base64,'){
					uni.showToast({
						title: '量子解密失败',
						icon:"none"
					});
				}else{
					data.fileUrl=base64
				}
				data.QSS=false
				that.$refs.qssAnimateGif.close()
				that.isNowSee(data)
			},
			//解密成功后是否立即查看
			isNowSee(data){
				let qss=getApp().globalData.GK_QSS_ONOFF
				if(qss.clickDecrypt&&qss.nowSee){
					that.$lizhao.download.qssSave(data.fileUrl)
				}
			}
		}

	}
</script>

<style lang="scss">
	.good-list {
		background-color: #fff;
		width: 100%;
		.u-cell-item{
			padding: 10rpx 32rpx;
			.image-inline{
				display: flex;flex-wrap: wrap;
				.item-image{margin-right:10rpx;margin-bottom: 10rpx;}
			}
			.error-item{
				color: red;
			}
		}
		.lizhaoImagePicture{
			position: fixed;top: 0;left: 0;bottom: 0;right: 0;
		}
		.iconList{
			width: 100%;
		}
	}
</style>
